<template>
  <div id="xzfx">
    <!-- tit -->
    <div class="tit">
      <h2>现状分析</h2>
      <div class="empty-box"></div>
      <p>一标三实、重点人员、异常事件</p>
    </div>
    <!-- con -->
    <div class="con">
      <div class="img-box">
        <img src="https://www.1nuoyun.com/uploadfile/2021/09/24/20210924154329OYIXWQ.png" alt="">
      </div>
      <div class="text-box">
        <div
          class="text-item"
          v-for="item in message"
          :key="item.mainTit"
        >
          <div class="mainTit">
            <h2>{{ item.mainTit }}</h2>
          </div>
          <div class="content">
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Xzfx",
    data() {
      return {
        message: [
          {
            mainTit: "“一标三实”数据不鲜活，实有人口管理难",
            content: "“一标三实”主要靠社区民警/网格员上门登记，工作量巨大，人口流动性大，及时更新困难，长期以来，导致社区和重点场所人口底数不清，情况不明。"
          },
          {
            mainTit: "重点人员管控困难",
            content: "传统依赖社区民警走访重点人员而形成的信息来源单一，数据不鲜活，管理效率低下，难准确检测重点人员的行为和动态。"
          },
          {
            mainTit: "异常事件不能主动发现，不能及时预警",
            content: "社区、人、车、房数据未关联汇聚，数据价值未被挖掘，无法发现异常事件的难题，无法及时消除社区治安的安全隐患。"
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  // PC端
  #xzfx {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      }
    };
    .con {
      padding: 4rem;
      box-shadow: 0 0 10px #f5f5f5;
      .img-box {
        margin-bottom: 3.2rem;
        img {
          width: 100%;
        }
      };
      .text-box {
        display: flex;
        .text-item {
          flex: 1;
          padding: 0 4rem;
          .mainTit {
            height: 8rem;
            padding: 0 1.6rem;
            margin-bottom: 1.6rem;
            border-left: 0.4rem solid #1890ff;
            h2 {
              font-size: 2.4rem;
              font-weight: 1000;
              color: #333;
            }
          };
          .content {
            p {
              font-size: 1.6rem;
              color: #666;
              text-align: justify;;
            }
          }
        }
      }
    };
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-0.5rem);
    }
  }
</style>